<template>
  <div class="personnel-list">
    <div class="filter-container">
      <el-input v-model="filters.name" placeholder="姓名" clearable style="width: 150px; margin-right: 10px;"></el-input>
      <el-input v-model="filters.id" placeholder="体检编号" clearable style="width: 150px; margin-right: 10px;"></el-input>
      <el-date-picker v-model="filters.date" type="date" placeholder="体检日期" clearable style="width: 150px; margin-right: 10px;"></el-date-picker>
      <el-button type="primary" @click="handleFilter">筛选</el-button>
    </div>
    <div class="table-container">
      <table class="custom-table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>体检编号</th>
            <th>体检日期</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in filteredList" :key="item.id">
            <td>{{ item.name }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.date }}</td>
            <td>{{ item.status }}</td>
            <td>
              <el-button type="text" @click="handleEdit(item)">编辑</el-button>
              <el-button type="text" @click="handleDelete(item)">删除</el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="pagination-container">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, prev, pager, next"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PersonnelList',
  data() {
    return {
      filters: {
        name: '',
        id: '',
        date: null
      },
      list: [
        { name: '张三', id: '001', date: '2023-01-01', status: '已完成' },
        { name: '李四', id: '002', date: '2023-01-02', status: '进行中' },
        { name: '王五', id: '003', date: '2023-01-03', status: '未开始' }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  computed: {
    filteredList() {
      let result = this.list;
      if (this.filters.name) {
        result = result.filter(item => item.name.includes(this.filters.name));
      }
      if (this.filters.id) {
        result = result.filter(item => item.id.includes(this.filters.id));
      }
      if (this.filters.date) {
        result = result.filter(item => item.date === this.filters.date);
      }
      this.total = result.length;
      return result.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    }
  },
  methods: {
    handleFilter() {
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleEdit(item) {
      console.log('编辑', item);
    },
    handleDelete(item) {
      console.log('删除', item);
    }
  }
};
</script>

<style scoped>
.personnel-list {
  padding: 20px;
}
.filter-container {
  margin-bottom: 20px;
}
.table-container {
  margin-bottom: 20px;
}
.custom-table {
  width: 100%;
  border-collapse: collapse;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}
.custom-table th, .custom-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}
.custom-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}
.custom-table tr:hover {
  background-color: #f5f7fa;
}
.pagination-container {
  text-align: center;
}
</style> 